<template>
  <view>
    <view class="header">
      <view class="search-yd">
        <view class="search__box">
          <image class="search__icon" src="~@/static/searchIcon.png" />
          <input
            focus
            v-model="params.keyword"
            class="search__input"
            placeholder="订单号/产品名称"
          />
          <image v-if="params.keyword" class="search__clear" src="~@/static/clearIcon.png" />
        </view>
        <view class="search__right">搜索</view>
      </view>
      <view class="tabs-box" >
        <van-tabs :active="active" color="#FBBF0D" title-active-color="#FBBF0D">
          <van-tab title="全部" name="0" />
          <van-tab title="待支付" />
          <van-tab title="待发货" />
          <van-tab title="待收货" />
          <van-tab title="已完成" />
          <van-tab title="已取消" />
        </van-tabs>
      </view>
    </view>
    <view class="content">
      <view @tap="detail" class="item">
        <view class="item__head">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/order/orderIcon.png" />
            <text>DD8468654654165</text>
          </view>
          <text class="item__status green">已完成</text>
        </view>
        <view class="item__cont">
          <Goods />
          <view class="item__total">
            共
            <text class="black"> 1 </text>
            件商品，
            实付款：
            <text class="red">￥59.00</text>
          </view>
          <view class="item__button">
            <view>物流信息</view>
            <view>删除订单</view>
          </view>
        </view>
      </view>
      <view @tap="detail" class="item">
        <view class="item__head">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/order/orderIcon.png" />
            <text>DD8468654654165</text>
          </view>
          <text class="item__status green">已完成</text>
        </view>
        <view class="item__cont">
          <Goods />
          <view class="item__total">
            共
            <text class="black"> 1 </text>
            件商品，
            实付款：
            <text class="red">￥59.00</text>
          </view>
          <view class="item__button">
            <view>物流信息</view>
            <view>删除订单</view>
          </view>
        </view>
      </view>
      <view @tap="detail" class="item">
        <view class="item__head">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/order/orderIcon.png" />
            <text>DD8468654654165</text>
          </view>
          <text class="item__status green">已完成</text>
        </view>
        <view class="item__cont">
          <Goods />
          <view class="item__total">
            共
            <text class="black"> 1 </text>
            件商品，
            实付款：
            <text class="red">￥59.00</text>
          </view>
          <view class="item__button">
            <view>物流信息</view>
            <view>删除订单</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Goods from '@/components/Goods/Goods.vue';

export default {
  components: { Goods },
  data() {
    return {
      params: {
        keyword: '',
      },
      active: 0
    }
  },
  methods: {
    detail() {
      uni.navigateTo({
        url: '/subpages/order/orderDetail/orderDetail'
      })
    }
  }
}
</script>

<style lang="scss">
.search-yd {
  width: 100%;
  height: 88rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 0 24rpx;
  font-size: 24rpx;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  .search__box {
    height: 64rpx;
    background-color: #f4f4f4;
    color: #999999;
    border-radius: 40rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .search__icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 8rpx;
  }
  .search__clear {
    width: 32rpx;
    height: 32rpx;
    margin-left: 8rpx;
  }
  .search__input {
    color: #333333;
    font-size: 24rpx;
    flex: 1;
  }
  .search__right {
    width: 48rpx;
    height: 64rpx;
    color: #666666;
    margin-left: 28rpx;
    display: flex;
    align-items: center;
  }
}
.header {
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0 0 14rpx 14rpx;
  overflow: hidden;
}
.tabs-box {
  margin-top: 12rpx;
}
.content {
  box-sizing: border-box;
  padding: 24rpx 24rpx 2rpx 24rpx;
}
.item {
  background-color: #fff;
  border-radius: 14rpx;
  overflow: hidden;
  font-size: 24rpx;
  color: #333;
  margin-bottom: 24rpx;
  .tip {
    color: #999;
  }
}
.item__head {
  width: 100%;
  height: 64rpx;
  border-bottom: 2rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
}
.item__icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.item__status {
  &.green {
    color: #2ECC23;
  }
  &.gray {
    color: #D1D1D1;
  }
}
.item__cont {
  box-sizing: border-box;
  padding: 24rpx;
}
.item__total {
  margin-top: 24rpx;
  color: #999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .black {
    color: #333;
    margin: 0 8rpx;
  }
  .red {
    color: #FF2323;
  }
}
.item__button {
  margin-top: 22rpx;
  display: flex;
  justify-content: flex-end;
  > view {
    border: 2rpx solid #EEEEEE;
    border-radius: 26rpx;
    height: 48rpx;
    box-sizing: border-box;
    padding: 0 16rpx;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 18rpx;
  }
}
</style>
